<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>upload</title>
    <link rel="icon" href="/favicon.png" type="image/x-icon">
    {% load static %}
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'icon/bootstrap-icons.min.css' %}">
</head>

<body>
    
    <div class="container">
        {% include 'common/nav.html' %}
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h2 class="h4 mb-0">上传图片</h2>
                    </div>

                    <div class="card-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}

                            <div class="mb-3">
                                <label for="id_title" class="form-label">标题</label>
                                {{ form.title }}
                                <div class="form-text">为您的图片起个有意义的标题</div>
                            </div>

                            <div class="mb-3">
                                <label for="id_description" class="form-label">描述</label>
                                {{ form.description }}
                            </div>

                            <div class="mb-4">
                                <label for="id_image_file" class="form-label">选择图片</label>
                                {{ form.image_file }}
                                <div class="form-text">支持 JPG, PNG 等常见图片格式</div>

                                <!-- 图片预览区域 -->
                                <div class="mt-3 text-center">
                                    <img id="imagePreview" src="#" alt="图片预览" class="img-thumbnail d-none"
                                        style="max-height: 300px;">
                                </div>
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="bi bi-upload me-2"></i>上传图片
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 预览图功能JavaScript -->
    <script>
        document.getElementById('id_image_file').addEventListener('change', function (event) {
            const preview = document.getElementById('imagePreview');
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                }

                reader.readAsDataURL(file);
            } else {
                preview.src = "#";
                preview.classList.add('d-none');
            }
        });
    </script>

    <!-- 添加Bootstrap Icons -->

    <!-- 确保表单控件有正确的Bootstrap类 -->
    <style>
        #id_title,
        #id_description,
        #id_image_file {
            width: 100%;
            padding: 0.375rem 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }

        #id_title,
        #id_description {
            display: block;
        }

        .card {
            border-radius: 15px;
        }
    </style>
</body>

</html>